<template>
  <main class="login-container">
    <div class="form-box">
      <mt-field placeholder="请输入手机号" @input="validPhone" type="tel" v-model="phone" disableClear></mt-field>
      <mt-field placeholder="请输入验证码" type="text" v-model="validCode" disableClear></mt-field>
      <mt-button v-if="!reSend" class="code get-code" @click="sendValidCode">获取验证码</mt-button>
      <mt-button v-else class="code dis-code" @click="sendValidCode" disabled>{{mins}}s后重新获取</mt-button>
      <div :class="['valid-container', showSlider?'display-block' : 'display-none']">
        <div class="slider"></div>
      </div>

      <mt-button type="primary" size="large" class="login-button" @click="loginElm">同意协议并登录</mt-button>
      <p>已阅读并同意<a class="polic" href="https://h5.ele.me/service/agreement/#HEAEDER_SHOW=1" target="_blank">《用户服务协议》</a>、<a href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_other/suit_bu1_other201903051859_43484.html" class="polic" target="_blank">《隐私权政策》</a></p>
    </div>
    <div class="login-footer">
      <p class="allow">所有方：上海拉扎斯信息科技有限公司</p>
      <p class="allow">增值电信业务许可证 :沪B2-20150033沪ICP备 09007032上海工商行政管理Copyright ©2008-2020 ele.me, All Rights Reserved.</p>
      <a style="display: block;" class="allow" href="http://www.zx110.org/picp/?sn=310100103568">
        <img src="https://img.alicdn.com/tfs/TB1ghLFaAL0gK0jSZFxXXXWHVXa-150-52.png" height="30" alt="已通过沪公网备案，备案号 310100103568">
      </a>
    </div>
  </main>
</template>

<script>
import { sendCodeLogin, validCodeLogin, getUserId  } from '@/api/elm-data'
import { clientSide } from '@/config'
export default {
  name: 'login',
  data() {
    return {
      phone: '15286542150',
      validCode: '',
      reSend: false,
      mins: 60,
      data: {
        token: '',
        value: ''
      },
      showSlider: false,
      isValid: false,
      once: true,
      SID: 'JwAAAAFOr_JK-QAEAACoqmvDrTIgCq8tLSz8EMkdirbwBf8GXglAD6Zz'
    }
  },
  methods: {
    validPhone(v) {
      this.$nextTick(() => {
        this.phone = v.replace(/[^0-9]|^0/g, '')
      })
    },
    async sendValidCode() {
      if(this.reSend) return
      if(!(/^1(3|4|5|6|7|8|9)\d{9}$/).test(this.phone)) {
        return this.$toast('电话号码格式不正确', 'center')
      }
      try {
        const { data } = await sendCodeLogin({mobile: this.phone})
      }catch(e) {
        const { response: { data} } = e
        if(data.name === 'NEED_SLIDE') {
          this.showSlider = true
        }
      }
      const interval = setInterval(()=> {
        if(this.isValid) {
          this.validCode = Math.random().toString().slice(2, 8)
          this.reSend = true
          clearInterval(interval)
          const i = setInterval(() => {
            this.mins = this.mins - 1
            if(this.mins === 0) {
              this.mins = 60
              this.reSend = false
              clearInterval(i)
            }
          }, 1000)
        }
      })
    },
    async loginElm() {
      if(!(/^1(3|4|5|6|7|8|9)\d{9}$/).test(this.phone)) {
        return this.$toast('电话号码格式不正确', 'center')
      }
      if(this.validCode === '') {
        return this.$toast('验证码不能为空', 'center')
      }
      const date =(new Date()).toLocaleString().split(' ')[0].split('/').join('-')
      window.sessionStorage.setItem('initValue', 'page')
      window.sessionStorage.setItem('token', 'ok')
      document.cookie = 'SID = ' + this.SID
      const { data } = await getUserId()
      if(!data) return this.$toast('账号已失效！')
      window.sessionStorage.setItem('USER_ID', data)
      this.$store.commit('getLoginState', true)
      this.$router.push('/index')
    }
  },
  mounted() {
    const validContainer = document.querySelector('.valid-container')
    const slider = document.querySelector('.slider')
    if(slider) {
      const maxWidth = validContainer.offsetWidth
      let move, start, end
      if(clientSide() === 'h5') {
        move = 'mousemove'
        start = 'mousedown'
        end= 'mouseup'
      }else if(clientSide() === 'mobile') {
        move = 'touchmove'
        start = 'touchstart'
        end='touchend'
      }
      let x = 0, sliderX = 0
      slider.addEventListener(start, e => {
        x = e.offsetX || e.targetTouches[0].pageX
        document.body.addEventListener(move, ev => {
          sliderX = ev.offsetX || ev.targetTouches[0].pageX
          slider.style.width = sliderX - validContainer.offsetLeft + 'px'
        })
        document.body.addEventListener(end, ev => {
          if((slider.offsetWidth + 4) === validContainer.offsetWidth ) {
            this.isValid = true
            this.showSlider = false
          }else {
            slider.style.transition = 'width .2s linear'
            slider.style.width = '0'
            this.isValid = false
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
  .login-container {
    height: 100%;
    background-image: url(https://gw.alicdn.com/tfs/TB1kHnqpcKfxu4jSZPfXXb3dXXa-750-192.png);
    background-repeat: no-repeat;
    background-position: center 300px;
    background-size: 550px 150px;
    background-color: #fff;
    border-top: 1px solid transparent;
  }
  .form-box {
    position: relative;
    margin-top: 550px;
  }
  /deep/.mint-field-core {
    height: 80px;
    font-size: 38px;
    padding-left: 15px;
    border-bottom: 1.5px solid #565656;
  }
   /deep/.mint-field-core[type=password] {
     border-bottom: 1.5px solid #b0b0b0;
   }
   .code {
     position: absolute;
     right: 30px;
     top: 100px;
     font-size: 30px;
     height: 60px;
     line-height: 50px;
     background-color: transparent;
   }
   .get-code {
     color: #00baff;
     border: 2px solid #00baff;
   }
   .dis-code {
     color: #8b8b8b;
     border: 2px solid #8b8b8b;
   }
   .mint-button::after {
     background-color: transparent!important;
   }
   .login-button {
     margin-top: 30px;
     font-size: 38px;
     height: 74px;
   }
   .polic{
     color: #00baff;
   }
   .polic:visited {
     color: #00baff;
   }
   .login-footer {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     text-align: center;
     background-color: #f5f5f5;
   }
   .valid-container {
     width: 80%;
     height: 100px;
     margin: 10px auto;
     background-color: #e7e7e7;
     border: 2px solid #aaa;
     border-radius: 10px;
     position: relative;
     &::before {
       content: '向右滑动验证';
       position: absolute;
       width: 100%;
       height: 100px;
       line-height: 100px;
       text-align: center;
       font-size: 30px;
     }
   }
   .slider {
     width: 100px;
     min-width: 100px!important;
     max-width: 100%!important;
     height: 100%;
     background-color: #4de771;
     border-radius: 10px;
     position: relative;
     &::after {
       content: '\e624';
       font-family: iconfont;
       position: absolute;
       right: 0;
       height: 100%;
       width: 100px;
       background-color: #ffffff;
       border-top-right-radius: 10px;
       border-bottom-right-radius: 10px;
       line-height: 100px;
       text-align: center;
       font-size: 50px;
       color: #a5a5a5;
     }
   }
</style>
